<extend name="Public/base"/>
<block name="content">

<style>
	.msg{background-color:#ccffff;padding:20px;width:200px;position:absolute;left:50%;margin-left:-100px;display:none;}

	.confirm{background-color:#ccffff;padding:20px;width:200px;position:absolute;left:50%;margin-left:-100px;top:50px;display:none;}

	.v-edit{background-color:#ccffff;padding:20px;width:300px;position:absolute;left:50%;margin-left:-150px;display:none;}

</style>

<form class="v-edit" action="">
	<input type="text" value="1" name="uid"><br>
	用户名<input name="uname" type="text"><br>
	手机<input name="phone" type="text"><br>
	邮箱<input name="email" type="text"><br>
	<input type="button" value="修改">
	<input type="button" value="取消"><br>
</form>

<div class="msg"></div>

<div class="confirm">
	<div class="tip_msg">你要删除吗？</div>
	<div>
		<input data-uid="" name="ok" type="button" value="确定">
		<input name="nok" type="button" value="取消">
	</div>
</div>

<table border=1>
	<tr>
		<td>编号</td>
		<td>用户名</td>
		<td>头像（大）</td>
		<td>头像（中）</td>
		<td>头像（小）</td>
		<td>电话</td>
		<td>邮箱</td>
		<td>操作</td>
	</tr>
	<volist name="user" id="v">
	<tr id="user_<{$v.uid}>">
		<td><{$v.uid}></td>
		<td><{$v.uname}></td>
		<td><img width="60px" src="__PUBLIC__/uploads/<{$v.face}>" alt=""></td>
		<td><img width="60px"  src="__PUBLIC__/uploads/<{$v.face2}>" alt=""></td>
		<td><img width="60px"  src="__PUBLIC__/uploads/<{$v.face3}>" alt=""></td>
		<td><{$v.phone}></td>
		<td><{$v.email}></td>
		<td>
			<input data-uid="<{$v.uid}>" name="del" type="button" value="删除">
			<input data-uid="<{$v.uid}>" name="edit" type="button" value="修改">
		</td>
	</tr>
	</volist>
</table>
<script>
$(function(){



	$('[name="edit"]').click(function(){
		var uid = $(this).attr('data-uid');
		$('.v-edit [name="uid"]').val(uid);
		$.get('<{:U("query")}>',{uid:uid},function(data){
			$('.v-edit [name="uname"]').val(data.uname);
			$('.v-edit [name="email"]').val(data.email);
			$('.v-edit [name="phone"]').val(data.phone);
			//$('.v-edit [name="sex"]').val(data.sex);
			//$('.v-edit [name="age"]').val(data.age);
			//$('.v-edit [name="type"]').val(data.type);
		},'json');

		$('.v-edit').show();	
		$( "#xg" ).dialog({
		  resizable: false,
		  title:"修改",
		  height: 330,
		  width: 380,
		  modal: true,
		  buttons: {
			"确认修改": function() {
				//var uid = $(this).attr('data-uid');
				var uname = $('.v-edit [name="uname"]').val();
				var uid = $('.v-edit [name="uid"]').val();
				var email =	$('.v-edit [name="email"]').val();
				var phone = $('.v-edit [name="phone"]').val();
				//var age = $('.v-edit [name="age"]').val();
			  
			  $.post('<{:U("edit")}>',{uid:uid,uname:uname,email:email,phone:phone},function(data){
				$('#user_'+uid+' td:eq(3)').text(uname);
				$('#user_'+uid+' td:eq(6)').text(phone);
				$('#user_'+uid+' td:eq(7)').text(email);
				$('#user_'+uid+' td:eq(5)').text(age);

				$('.msg').text(data.msg);
				$('.msg').slideDown('fast');
				setTimeout(function(){$('.msg').slideUp('fast');},1600);			
				},'json');
				$( this ).dialog( "close" );
				},
				"取消": function() {
				  $( this ).dialog( "close" );
			}
		  }
		});
	});
	//确认修改
	/*$('.v-edit :button:eq(0)').click(function(){
		var uname = $('.v-edit [name="uname"]').val();
		var uid = $('.v-edit [name="uid"]').val();
		var email =	$('.v-edit [name="email"]').val();
		var phone = $('.v-edit [name="phone"]').val();

		
		$.post('<{:U("edit")}>',{uid:uid,uname:uname,email:email,phone:phone},function(data){

			
		$('#user_'+uid+' td:eq(1)').text(uname);
		$('#user_'+uid+' td:eq(5)').text(phone);
		$('#user_'+uid+' td:eq(6)').text(email);


			$('.msg').text(data.msg);
			$('.msg').slideDown('fast');
			setTimeout(function(){$('.msg').slideUp('fast');},1000);	
			
			$('.v-edit').hide();
		},'json');
		
	});
	$('.v-edit :button:eq(1)').click(function(){
		$('.v-edit').hide();
	});
	//修改
	$('[name="edit"]').click(function(){
		//获取uid
		var uid = $(this).attr('data-uid');
		$('.v-edit [name="uid"]').val(uid);

		//查询当前记录
		
		$.get('<{:U("query")}>',{uid:uid},function(data){
			$('.v-edit [name="uname"]').val(data.uname);
			$('.v-edit [name="email"]').val(data.email);
			$('.v-edit [name="phone"]').val(data.phone);
		},'json');

		$('.v-edit').show();*/		
		
	});
	











	//删除
	$('.confirm [name="ok"]').click(function(){
		$('.confirm').hide();
		
		var uid = $(this).attr('data-uid');
		$(this).val('删除中...');
		$.get('<{:U("del")}>',{uid:uid},function(data){
			if(data.status){				
				$('#user_'+uid).remove();
				$('.msg').text(data.msg);
				$('.msg').slideDown('fast');
				setTimeout(function(){$('.msg').slideUp('fast');},1000);				
			}else{
				$('#user_'+uid+' [name="del"]').val('删除');
				
				$('.msg').text(data.msg);
				$('.msg').slideDown('fast');
				setTimeout(function(){$('.msg').slideUp('fast');},1000);
			}			
		},'json');
	
	});
	$('.confirm [name="nok"]').click(function(){
		$('.confirm').hide();
	
	});



	$('[name="del"]').click(function(){

		$('.confirm').show();	
		var uid = $(this).attr('data-uid');
		$('.confirm [name="ok"]').attr('data-uid',uid);
		
	});
	
});



</script>

</block>